<template>
  <div class="main">
    <v-navbar></v-navbar>
    <div class="product">
        <ul>
            <li v-for="item in list">
                <a :href="item.link" class="img"><img :src="item.src" /></a>
                <a :href="item.link" class="name">{{ item.title }}</a>
                <a :href="item.classify_link" class="classify">{{ item.classify }}</a>
                <p>价格：<span>{{ item.price }}</span></p>
            </li>
        </ul>
        <div class="page">
            <a href="javascript:;" @click="prev">上一页</a>
            <div class="select">
                <div class="val">{{ pageNum }}</div>
                <select v-model="pageNum">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div>
            <a href="javascript:;" @click="next">下一页</a>
        </div>
    </div>
  </div>
</template>

<script>
  import vNavbar from './components/navbar'
  export default {
	data (){
		return {
            pageNum: 1,
            list: [
                {
                    title: '汽车除雪用品多功能可伸缩除雪铲刮雪器清雪板车用除霜除冰',
                    classify: '精品内衣 ...',
                    price: '￥180.00',
                    link: '#/msg_product?msg=automobile&id=1',
                    classify_link: '#/list_product?list=automobile',
                    src: require('../assets/essencePro1.jpg')
                },
                {
                    title: '汽车除雪用品多功能可伸缩除雪铲刮雪器清雪板车用除霜除冰',
                    classify: '精品内衣 ...',
                    price: '￥180.00',
                    link: '#/msg_product?msg=automobile&id=2',
                    classify_link: '#/list_product?list=automobile',
                    src: require('../assets/essencePro2.jpg')
                },
                {
                    title: '汽车除雪用品多功能可伸缩除雪铲刮雪器清雪板车用除霜除冰',
                    classify: '精品内衣 ...',
                    price: '￥180.00',
                    link: '#/msg_product?msg=automobile&id=3',
                    classify_link: '#/list_product?list=automobile',
                    src: require('../assets/essencePro3.jpg')
                },
                {
                    title: '汽车除雪用品多功能可伸缩除雪铲刮雪器清雪板车用除霜除冰',
                    classify: '精品内衣 ...',
                    price: '￥180.00',
                    link: '#/msg_product?msg=automobile&id=4',
                    classify_link: '#/list_product?list=automobile',
                    src: require('../assets/essencePro4.jpg')
                },
                {
                    title: '汽车除雪用品多功能可伸缩除雪铲刮雪器清雪板车用除霜除冰',
                    classify: '精品内衣 ...',
                    price: '￥180.00',
                    link: '#/msg_product?msg=automobile&id=5',
                    classify_link: '#/list_product?list=automobile',
                    src: require('../assets/essencePro5.jpg')
                },
                {
                    title: '汽车除雪用品多功能可伸缩除雪铲刮雪器清雪板车用除霜除冰',
                    classify: '精品内衣 ...',
                    price: '￥180.00',
                    link: '#/msg_product?msg=automobile&id=6',
                    classify_link: '#/list_product?list=automobile',
                    src: require('../assets/essencePro1.jpg')
                },
            ]
        }
	},
    methods: {
        prev (){
            if (this.pageNum > 1) {
                this.pageNum --;
            }
        },  
        next (){
            if (this.pageNum < 3) {
                this.pageNum ++;
            }
        }
	},
    computed : {
        update (){
            if (this.$route.query.id) {
                console.log('list='+ this.$route.query.list + ',id='+ this.$route.query.id);
            }else{
                console.log('list='+ this.$route.query.list);
            }
        }
    },
	components : {	
        vNavbar
	},
    created (){
        this.update;
    },
    watch: {
        $route(){
            this.update;
        }
    }
  }
</script>
<style>
    .weui-grids:before,.weui-grids:after{
        border:none !important;
    }
    .product{
        overflow:hidden; margin:.2rem auto 0;
    }
    .product .title{
        height:.44rem; line-height:.44rem; font-size:.16rem; text-align:center; color:#000;
    }
    .product li{
        width:38.4%; margin:0 2% .1rem 0; float:left; padding:.15rem; background:#fff; border:.01rem solid #eee;
    }
    .product li:hover{
        border-color:#c81118;
    }
    .product li img{
        width:100%;
    }
    .product li:nth-of-type(2n){
        margin-right:0;
    }
    .product ul{
        background:#f7f7f7; overflow:hidden; padding:0 .08rem;
    }
    .product ul .img{
        display:block;
    }
    .product ul .classify{
        line-height:.22rem; color:#0064d4;
    }
    .product ul .classify:hover{
        color:#2c90fff;
    }
    .product ul p{
        color:#acacac;
    }
    .product ul p span{
        font-size:.14rem; color:#cc0000; font-weight:bold;
    }
    .page{
        width:100%; margin:.3rem auto .2rem; text-align:center; overflow:hidden;
    }
    .page a{
        background:#eee; width:.8rem; border-radius:.03rem; display:inline-block; margin:0 .15rem; height:.33rem; line-height:.33rem; float:left;
    }
    .page .select{
      display:inline-block; position:relative;width:.96rem; height:.3rem; float:left;
    }
    .page .select .val{
         border:1px solid #ccc; position:absolute; background:#eee; width:.96rem; height:.3rem; text-align:center; line-height:.3rem; border-radius:.04rem;
    }
    .page .select select{
        opacity:0; position:absolute; width:100%; left:0; height:.3rem;
    }
</style>
